<!--
  Polygon Animation Demo Component

  This demo shows animated polygon materials with dynamic transparency
  
  Category: Basic

  Component Documentation:
  ========================

  Title: Polygon Animation Demo
  Description: This demo shows animated polygon materials with dynamic transparency
  Features:
    - TODO: List key features of this demo
  Author: CesiumJS Demo Project
  Date: 8/21/2025
-->

<template>
  <BaseCesiumViewer 
    ref="cesiumViewer" 
     
    @viewer-ready="onViewerReady"
  />
</template>

<script>
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import { setViewRectangle } from '../utils';
import { createMultipleAnimatedPolygons, createGlowPolygon, createRippleAnimation } from './PolygonAnimationDemo.utils.js';

export default {
  name: 'PolygonAnimationDemo',
  components: {
    BaseCesiumViewer
  },
  setup() {

    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      const { viewer, Cesium } = payload;
      
      // Create animated polygons using demo-specific utilities
      createMultipleAnimatedPolygons(viewer, [
        {
          name: 'Beijing',
          positions: [
            116.2, 39.8,
            116.5, 39.8,
            116.5, 40.1,
            116.2, 40.1
          ],
          color: Cesium.Color.RED,
          extrudedHeight: 50000,
          phase: 0
        },
        {
          name: 'Shanghai',
          positions: [
            121.2, 31.1,
            121.8, 31.1,
            121.8, 31.4,
            121.2, 31.4
          ],
          color: Cesium.Color.BLUE,
          extrudedHeight: 50000,
          phase: Math.PI/2
        },
        {
          name: 'Guangzhou',
          positions: [
            113.2, 23.0,
            113.4, 23.0,
            113.4, 23.2,
            113.2, 23.2
          ],
          color: Cesium.Color.GREEN,
          extrudedHeight: 50000,
          phase: Math.PI
        }
      ]);

      // 创建一个大的泛光区域覆盖中国
      createGlowPolygon(viewer, {
        name: 'China Glow',
        positions: [
          100.0, 20.0,
          125.0, 20.0,
          125.0, 45.0,
          100.0, 45.0
        ]
      });

      // 添加扩散动画效果在空白区域，避免与现有区域重叠
      createRippleAnimation(viewer, {
        longitude: 110.0,  // 中国中部偏西位置
        latitude: 35.0,    // 避开现有区域的纬度
        color: Cesium.Color.CYAN,
        maxRadius: 50,     // 扩大十倍
        speed: 0.5,
        count: 5,
        name: 'Ripple Effect 1'
      });

      // 添加另一个扩散动画效果在不同空白区域
      createRippleAnimation(viewer, {
        longitude: 118.0,  // 中国东部位置
        latitude: 25.0,    // 纬度较低的空白区域
        color: Cesium.Color.YELLOW,
        maxRadius: 40,     // 扩大十倍
        speed: 0.4,
        count: 4,
        name: 'Ripple Effect 2'
      });

      // 将视图定位到中国区域
      setViewRectangle(viewer, {
        west: 100,
        south: 20,
        east: 125,
        north: 45
      });
    };

    return {
      onViewerReady
    };
  }
};
</script>

<style scoped>
/* 组件样式 */
</style>